<!--  -->
<template>
<div class='pngbox'>
      <div class="png">
          <img class="bj" :src="infor.url" alt srcset  />
          <img
            src="/static/images/about/play.png"
            class="playImg"
            alt
            srcset
            @click="videoPlay"
            
          />
      </div>
      
      <div class="video" v-show="playImgShow">
        <!-- <video src="http://re.hqy2001.com/PINXUAN/huaqingyuanjiaoyu.mp4"></video>autoplay controls -->
         <video
          x-webkit-airplay="true"
          webkit-playsinline="true"
          id="bannerVideo"
          class="bannerVideo"
          :poster="infor.url"
          controls
          loop
          playsinline="tvc"
          type="video/mp4"
          :preload="infor.url"
          x5-video-player-type="h5"
          x5-video-player-fullscreen="true"
          ref="bannerVideo"
          controlslist="nodownload"
        > 
          <source src="http://re.hqy2001.com/PINXUAN/huaqingyuanjiaoyu.mp4" type="video/mp4" />
          <embed src="http://re.hqy2001.com/PINXUAN/huaqingyuanjiaoyu.mp4" hidden="no" />
        </video>
        <a href="javascript:;" class="closebtn" @click="close()">
          <img :src="this.closebtn" alt="">
        </a>
      </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
  closebtn:'/static/images/close.png',/* 关闭按钮 */
 infor: {
        url: '/static/images/about/banner1.png',
        height: '500px',
        type: 1
      },
      playImgShow: false,
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    close(){
      this.$refs.bannerVideo.pause();
      this.playImgShow = false;
    },
    videoPlay() {
      // let myVideo = document.getElementById('bannerVideo')
      // this.$refs.bannerVideo.pause();//暂停
      this.$refs.bannerVideo.play(); //播放
      this.playImgShow = true;
    },
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.png{
  display: block;
  width: 100%;
  position: relative;
  height: 504px;
  .bj{
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
  } 
  .png{
      width: 100%;
  // height: 100%;
    display: block;
    img{
      display: block;
      width: 100%;
    }
  }
    .playImg {
      width: 70px;
      height: 70px;
      position: absolute;
      top: 300px;
      left: 50%;
      transform: translate(-50%,-50%);
      z-index: 99;
      cursor: pointer;
    }

}
  .bannerVideo {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
  }
  .pngbox{
    display: block;
    width: 100%;
  }

#banner {
  width: 100%;

  .img {
    width: 100%;
    height: 100%;
    position: relative;

    img,
    .video,
    video,
    .swiper {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }


  }
}

  .video{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    bottom: 0;
    video{
      width: 800px;
      height: 450px;
      position: absolute;
      margin-left: -400px;
      margin-top: -275px;
      left: 50%;
      top:50%
    }
    .closebtn{
      position: absolute;
      left: 50%;
      top: 50%;
margin-left: 365px;
    margin-top: -241px;
      transform: translate(-50%, -50%);
      width: 30px;
      height: 30px;
      background: rgba(255,255,255,0.6);
      border-radius: 50%;
      img{
        display: block;
        width: 100%;
      }
    }
  }
</style>